<template>
  <el-card>
    <div class="body_box">
      <div class="box_header">
        <el-form :model="queryParams">
          <span
            style="
              font-size: 20px;
              font-weight: 600;
              height: 7vh;
              line-height: 7vh;
              margin-left: 50px;
            "
            >居民家访信息</span
          >
        </el-form>
      </div>
      <div class="box_content">
        <el-table
          @row-click="handleEdit"
          :data="
            items.slice((currentPage - 1) * pageSize, currentPage * pageSize)
          "
          id="eltable"
          height="61vh"
          :header-cell-style="{ 'text-align': 'center', 'font-size': '14px' }"
          :cell-style="{ 'text-align': 'center' }"
        >
          <el-table-column type="expand">
            <template #default="props">
              <div m="4" class="childTable">
                <p m="t-0 b-2">性别:{{ props.row.sex == 1 ? "男" : "女" }}</p>
                <p m="t-0 b-2">住址: {{ props.row.address }}</p>
                <p m="t-0 b-2">身份证号: {{ props.row.idcard }}</p>
                <p m="t-0 b-2">上次家访时间: {{ props.row.lastTime }}</p>
                <p m="t-0 b-2">家访记录创建时间: {{ props.row.createTime }}</p>
                <p m="t-0 b-2">家访结果: {{ props.row.result }}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="120" />
          <el-table-column prop="disease" label="疾病" width="510" />
          <el-table-column prop="flagFinished" label="家访">
            <template #default="props">
              <el-tag
                :type="props.row.flagFinished == '0' ? 'primary' : 'success'"
                >{{
                  props.row.flagFinished == "0" ? "待家访" : "已完成"
                }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column prop="lastResult" label="(上次)家访状况">
            <template #default="props">
              <el-tag
                :type="
                  props.row.lastResult == '良好'
                    ? 'primary'
                    : props.row.lastResult == '尚可'
                    ? 'success'
                    : props.row.lastResult == '注意'
                    ? 'warning'
                    : 'danger'
                "
                >{{ props.row.lastResult }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column prop="nextTime" label="下次家访时间" />

          <template v-slot:empty>
            <span style="color: #969799">未查询到相关信息</span>
          </template>
        </el-table>
        <div class="page">
          <el-pagination
            v-model:current-page="currentPage"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            background
            :total="items.length"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
    <a-float-button
      shape="circle"
      type="primary"
      :style="{
        top: '145px',
        right:'17px'
      }"
      @click="handleClick()"
    >
      <template #icon>
        <svg
          t="1710575865787"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="8963"
          width="16"
          height="16"
        >
          <path
            d="M853.333333 245.333333H245.333333l93.866667-93.866666c12.8-12.8 12.8-34.133333 0-46.933334-12.8-12.8-34.133333-12.8-46.933333 0l-145.066667 145.066667c-12.8 12.8-12.8 34.133333 0 46.933333l145.066667 145.066667c6.4 6.4 14.933333 10.666667 23.466666 10.666667s17.066667-4.266667 23.466667-10.666667c12.8-12.8 12.8-34.133333 0-46.933333L256 311.466667h597.333333c6.4 0 10.666667 4.266667 10.666667 10.666666v426.666667c0 6.4-4.266667 10.666667-10.666667 10.666667H170.666667c-17.066667 0-32 14.933333-32 32s14.933333 32 32 32h682.666666c40.533333 0 74.666667-34.133333 74.666667-74.666667V320c0-40.533333-34.133333-74.666667-74.666667-74.666667z"
            fill="#ffffff"
            p-id="8964"
          ></path>
        </svg>
      </template>
    </a-float-button>
  </el-card>
</template>
<script>
import { ref } from "vue";
import { pageMixin } from "@/mixins/pageMixin";
import { getTimeFormat, getTimeFor } from "@/mixins/dateTimeFormat";
import { getList, delayNextTime, save, history } from "@/api/disease";
export default {
  mixins: [pageMixin],
  data() {
    return {
      queryParams: {},
      items: [],
    };
  },
  created() {
    this.paramIdCard = this.$route.query.params;
    this.queryParams.idcard = this.paramIdCard;
    this.queryList();
  },
  methods: {
    queryList() {
      history(this.queryParams).then((res) => {
        res.data.data.forEach((item) => {
          item.nextTime = this.computedTime(
            new Date(item.nextTime),
            new Date()
          );
        });
        this.items = res.data.data;
      });
    },
    computedTime(nextTime, nowTime) {
      var days = nextTime.getTime() - nowTime.getTime();
      if (days < 0) {
        return "已过期";
      } else {
        var dayRes = Math.ceil(days / (1000 * 60 * 60 * 24));
        return dayRes + "天";
      }
    },
    handleClick() {
      this.$router.push(`/diseaseHealth`);
    },
  },
};
</script>
<style scoped lang="scss">
.body_box {
  width: 100%;
  height: auto;
  margin-bottom: 5px;
  .box_header {
    width: 100%;
    height: 7vh;
  }
  .box_content {
    width: 100%;
    height: 67vh;
    .red {
      color: red;
      font-weight: 600;
    }
    .childTable {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      flex-wrap: wrap;
      align-items: center;
      p {
        width: 500px;
        font-weight: 600;
        padding: 10px;
      }
    }
    .page {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-right: 20px;
      align-items: end;
      width: 100%;
      height: 40px;
      background-color: white;
    }
  }
}
</style>
